/**
 * Created by mapbar_front on 2019/8/1.
 */
import React,{Component} from 'react';

const ThemeContext = React.createContext('light');
const UserContext = React.createContext({
    name:'xiao',
});

function SlideBar(){
    return(
        <h2>
            SlideBar
        </h2>
    )
}

function Layout(){
    return(
        <div>
            <SlideBar/>
            <Content/>
        </div>
    )
}

function ProfilePage(props){
    console.log('ProfilePage',props);
    return(
        <div>
            <p>{props.user}</p>
            <p>{props.theme}</p>
        </div>
    )
}

function Content(){
    return(
        <ThemeContext.Consumer>
            {
                theme=>(
                    <UserContext.Consumer>
                        {
                            user=>(
                                <ProfilePage user={user} theme={theme}/>
                            )
                        }
                    </UserContext.Consumer>
                )
            }
        </ThemeContext.Consumer>
    )
}
class Context3 extends Component{
    render(){
        const {signedInUser,theme} = this.props;
        return(
            <div>
                <ThemeContext.Provider value='theme'>
                    <UserContext.Provider value='signedInUser'>
                        <Layout/>
                    </UserContext.Provider>
                </ThemeContext.Provider>
            </div>
        )
    }
}
export default Context3;
